<template>
    <view class="xilu">
        <u-navbar :safeAreaInsetTop="true" bgColor="#fff" auto-back="true">
            <view class="xilu_classic_list flex-box flex-center fs32 col89" slot="center">
                <view :class="classicIndex == index?'active':''" v-for="(item,index) in classList"
                    @click="changeList(index)">{{item}}</view>
            </view>
        </u-navbar>
        <mescroll-body v-if="classicIndex==0" ref="mescrollRef" :fixed="false" @init="mescrollInit" @down="downCallback" @up="upCallback"
            :down="downOption" :up="upOption" :topbar="true" top="44px">
            <!--  -->
            <view v-if="classicIndex == 0" class="pt30">
                <goodslist :list="list" :showCollect="true"></goodslist>
            </view>
        </mescroll-body>
		<mescroll-body v-if="classicIndex==1" ref="mescrollRef" :fixed="false" @init="mescrollInit" @down="downCallback2" @up="upCallback2"
		    :down="downOption" :up="upOption" :topbar="true" top="44px">
		    <!--  -->
		    <view v-if="classicIndex == 1">
		        <Trends :trends="trends" @togglesRec="togglesRec" @togglesCollect="togglesCollect" @comment="comment" @previewImg="previewImg" @toggleFocus="toggleFocus" @bindDetail="bindDetail">
		        </Trends>
		    </view>
		</mescroll-body>
    </view>
</template>

<script>
    // 引入mescroll-mixins.js
    import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
    import Trends from "@/components/trends/trends.vue";
    import goodslist from "@/components/goodslist/goodslist.vue";
    export default {
        mixins: [MescrollMixin], // 使用mixin
        components: {
            Trends,
            goodslist
        },
        data() {
            return {
                classList: ["闲置", "帖子"],
                classicIndex: 0,
                list: [],
                trends: []
            };
        },
        methods: {
            changeList(index) {
                this.classicIndex = index;
            },
			/*上拉加载的回调*/
			upCallback(page) {
				// 此处可以继续请求其他接口
				let pageNum = page.num; // 页码, 默认从1开始
				let pageSize = page.size; // 页长, 默认每页10条
				this.$core.get({
					url: 'xilumarket.product/user_collection',
					loading:false,
					data:{page: pageNum,pageSize:pageSize},
					success: (ret) => {
						let data = ret.data;
						// 接口返回的当前页数据列表 (数组)
						let curPageData = data.data;
						// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
						let curPageLen = curPageData.length;
						// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
						let totalPage = data.last_page;
						// 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
						//let totalSize = data.total;
						// 接口返回的是否有下一页 (true/false)
						//let hasNext = data.current_page;
				
						//设置列表数据
						if (page.num == 1) this.list = []; //如果是第一页需手动置空列表
						this.list = this.list.concat(curPageData); //追加新数据
				
						// 请求成功,隐藏加载状态
						//方法一(推荐): 后台接口有返回列表的总页数 totalPage
						this.mescroll.endByPage(curPageLen, totalPage);
				
						
						setTimeout(() => {
							this.mescroll.endSuccess(curPageLen)
						}, 20)
					},
					fail: () => {
						//  请求失败,隐藏加载状态
						this.mescroll.endErr()
					}
				})
		
			},
		
			downCallback2() {
				if(this.mescroll.optUp.use){
					this.mescroll.resetUpScroll()
				}else{
					setTimeout(()=>{
						this.mescroll.endSuccess();
					}, 500)
				}
			},
			upCallback2(page) {
					// 此处可以继续请求其他接口
					let pageNum = page.num; // 页码, 默认从1开始
					let pageSize = page.size; // 页长, 默认每页10条
					this.$core.get({
						url: "xilumarket.forum/user_collection",
						loading:false,
						data:{page: pageNum,pageSize:pageSize},
						success: (ret) => {
							let data = ret.data;
							// 接口返回的当前页数据列表 (数组)
							let curPageData = data.data;
							// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
							let curPageLen = curPageData.length;
							// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
							let totalPage = data.last_page;
							// 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
							//let totalSize = data.total;
							// 接口返回的是否有下一页 (true/false)
							//let hasNext = data.current_page;
					
							//设置列表数据
							if (page.num == 1) this.trends = []; //如果是第一页需手动置空列表
							this.trends = this.trends.concat(curPageData); //追加新数据
					
							// 请求成功,隐藏加载状态
							//方法一(推荐): 后台接口有返回列表的总页数 totalPage
							this.mescroll.endByPage(curPageLen, totalPage);
					
							
							setTimeout(() => {
								this.mescroll.endSuccess(curPageLen)
							}, 20)
						},
						fail: () => {
							//  请求失败,隐藏加载状态
							this.mescroll.endErr()
						}
					})
			
			},
			// 点击收藏
			togglesCollect(e) {
				if(!this.$core.getUserinfo(true)){
					return true;
				}
				this.$core.post({url: 'xilumarket.forum/toggle_collection',data: {forum_id: e.id},success: ret => {
						this.trends[e.index] = ret.data;
						this.$forceUpdate();
					},fail: err => {}
				});
			},
			// 点击点赞
			togglesRec(e) {
				if(!this.$core.getUserinfo(true)){
					return true;
				}
				this.$core.post({url: 'xilumarket.forum/toggle_fav',data: {forum_id: e.id},success: ret => {
							this.trends[e.index] = ret.data;
							this.$forceUpdate();
					},fail: err => {
							
					}
				});
				
			},
			// 点击评论
			comment(e) {
			    uni.navigateTo({
			        url: "",
			    })
			},
			// 关注取关
			toggleFocus(e) {
				if(!this.$core.getUserinfo(true)){
					return true;
				}
				this.$core.post({url: 'xilumarket.forum/toggle_focus',data: {user_id: e.user_id},success: ret => {
						this.trends[e.index].is_focus_count = ret.data.is_focus_count;
						this.$forceUpdate();
					},fail: err => {
						console.log(err);
					}
				});
			},
			//详情
			bindDetail(e){
				uni.navigateTo({
					url: '/discovery/trends_detail/trends_detail?id='+e.id
				})
			},
			// 点击预览
			previewImg(e) {
			    let that = this;
			    uni.previewImage({
			        current: e.picIndex,
			        urls: that.trends[e.arrIndex].images_text,
			        fail() {
			            uni.showToast({
			                title:"网络错误，请重试"
			            })
			        }
			    })
			},
		}
	}
</script>

<style lang="scss" scoped>
    .xilu {
        &_classic_list {
            width: 100%;
            height: 88rpx;

            view {
                margin: 0 25rpx;

                &.active {
                    font-size: 32rpx;
                    color: #101010;
                    position: relative;

                    &::after {
                        display: block;
                        content: "";
                        width: 31rpx;
                        height: 13rpx;
                        background: url(@/static/icon/index_active.png) no-repeat center;
                        background-size: 100%;
                        position: absolute;
                        bottom: -16rpx;
                        left: 0;
                        right: 0;
                        margin: auto;
                    }
                }

                &:first-child {
                    margin-left: 30rpx;
                }
            }
        }
    }
</style>
